<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>订单详情</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="/staticFile/images/userIndex/favicon.ico" />
<link type="text/css" rel="stylesheet" href="/staticFile/css/userIndex/common.css">
<link type="text/css" rel="stylesheet" href="/staticFile/css/userIndex/userLogin.css">
<style type="text/css">
.middle-main{width: 820px;background: white;margin: 0 auto;padding: 30px 70px 0 70px;}
.middle-main strong{font-size: 24px;}
.middle-main .service-list{margin-top: 20px;}
.service-list div{font-size: 20px;line-height: 32px;}
.service-list label{font-weight: bolder;}
.service-list .len-text{display: block;margin-left: 110px;margin-top: -30px;}
.btn-back{display: none;
    background: url(../staticFile/images/userIndex/menu-row-tail.gif) center bottom repeat-x;cursor: pointer;
    border: 0; font-size: 22px;width: 120px;color: white;font-weight: bolder;line-height: 36px;margin-top: 30px;
}
#writeCheckCode{line-height:20px;font-size:20px;}
#systemCheckCode{background:url(../staticFile/images/userIndex/menu-row-tail.gif) center repeat-x;margin-left:40px;}
#seeFullPhone{line-height:22px;font-size:20px;cursor: pointer;border:0px;background: url(../staticFile/images/userIndex/row-top.gif) center top repeat-x;color: #ffffff;}
.middle-main{padding-bottom: 48px;}
.issuer-rate{margin-top: 6px;margin-left: 16px;}
#rateDiv table{margin-top: 8px;width: 820px;}
#rateDiv table tr{border-top: 2px solid #e84c3d;}
#rateDiv table tr td{padding-top: 10px;padding-bottom: 10px;}
.rate-user{width: 120px;}
.user-impress ul li{
    width:115px;height:43px;border:1px solid #e84c3d;text-align: center;font-size:16px;line-height:43px;
    margin-right:24px;float:left;overflow: hidden;position:relative;margin-top: 6px;}
#rateDiv{margin-top: 20px;}
.level{color:#e84c3d;font-size:16px;margin-left:15px;}
</style>
<script type="text/javascript" src="/staticFile/js/common/getDictionaries.js"></script>
<script type="text/javascript" src="/staticFile/js/plugins/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/staticFile/js/common/constant.js"></script>
<script type="text/javascript" src="/staticFile/js/common/commonUtil.js"></script>
<script type="text/javascript" src="/staticFile/js/common/dragImgVerify.js"></script>
<script type="text/javascript" src="/staticFile/js/common/simpleTipsUtil.js"></script>
<script type="text/javascript" src="/staticFile/js/plugins/encryption/scs_sha1.js"></script>
<script type="text/javascript" src="/staticFile/js/userIndex/scsCommonIndex.js"></script>
<script type="text/javascript" src="/staticFile/js/userIndex/userLogin.js"></script>
</head>
<body>
<header id="pageHeader">
    <div class="row-top">
        <div class="main">
            <div class="wrapper top-logo">
                <a href="/">LGL</a>
            </div>
            <a style="display: none;" id="IamLogout" href="javascript:void(0)">退出</a>
        </div>
    </div>
    <div class="menu-row">
        <div class="menu-bg">
            <div class="main">
                <nav class="indent-left">
                    <ul class="menu wrapper">
                        <li><a href="/">热门服务</a></li>
                        <li><a href="javascript: void(0);">发布服务</a></li>
                        <li id="Myself">
                            <a href="userRegister.html" class="user-register">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注册</a>
                            <a href="userLogin.html" class="user-login" style="color: #fff;">登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                        </li>
                        <li><a href="joinUs.html">JOIN US</a></li>
                        <li><a href="commonProblems.html">常见问题</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>

<!-- 发表服务表单 -->
<div class="middle-main">
    <strong>服务订单信息</strong>
    <div class="service-list">
        <div>
            <label>订单单号：</label>
            <span id="billNo"/>
        </div>
        <div>
            <input id="soBillNumber" type="hidden">
            <input id="issuerUserId_" type="hidden">
            <label>服务标题：</label>
            <span id="soName" class="len-text"/>
        </div>
        <div>
            <label>发布时间：</label>
            <span id="soOrderDate"/>
        </div>
        <div>
            <label>服务时间：</label>
            <span id="soServiceDate"/>
        </div>
        <div>
            <label>服务类型：</label>
            <span id="serviceTypeName"/>
        </div>
        <div>
            <label>服务地址：</label>
            <span id="soAddress" class="len-text"/>
        </div>
        <div>
            <label>距离您有：</label>
            <span id="soDistance"/>
        </div>
        <div>
            <label>联系电话：</label>
            <span id="issuerPhone"></span>
            <span id="systemCheckCode"></span>
            <!-- 仅用于防止opera浏览器自动填充搜索框 -->
            <input autocomplete="new-password" type="password" hidden>
            <input id="writeCheckCode" autocomplete="off" type="text" size="4">
            <input id="seeFullPhone" type="button" value="点击查看完整号码">
        </div>
        <div>
            <label>服务金额：</label>
            <span id="soAmount"/>
        </div>
        <div>
            <label>要求描述：</label>
            <span id="soDesc" class="len-text"/>
        </div>
        <div>
            <!-- 主页到订单情况页面是“_blank”，所以返回按钮就没用了，临时注释 -->
            <!--<button class="btn-back" onclick="history.back();">返回</button>&nbsp;&nbsp;&nbsp;&nbsp;-->
            <button id="btnGrabOrder1688" class="btn-back">我要抢单</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button id="btnSeeOrderRate" class="btn-back">查看评价</button>
        </div>
        <!-- 评价内容 -->
        <div id="rateDiv">
            <table></table>
        </div>
    </div>
</div>
<!-- 页面尾部 -->
<div id="footer" class="footer">
    <div class="footer_info">
        <div class="footer-care-us" style="margin-left: 0px;">
            <strong>关注微信</strong><br/>
            <!--微信扫一扫<br />-->
            <img src="/staticFile/images/userIndex/weChat.png"/>
        </div>
        <div class="footer-about-us">
            <strong>关于九九</strong><br/>
            <a target="_blank" href="aboutUs.html">关于我们</a><br/>
            <a target="_blank" href="serviceAim.html">服务宗旨</a><br/>
            <a target="_blank" href="feedback.html">意见反馈</a>
        </div>
        <div class="footer-contact-us">
            <strong>联系我们</strong><br/>
            <span>
                客服电话：186-7078-7994<br />
                服务邮箱：ijobvip@163.com<br />
                公司地址：北京丰台区草桥东路
            </span>
        </div>
        <div class="footer-record" style="float: right;">
            京ICP备25697805号-4  京ICP证182661号  Copyright © 2015-2016
        </div>
    </div>
</div>
<!-- 用户登录 -->
<div id="middleMain" class="content index-login" style="display: none;z-index:9006;position:fixed;">
    <img class="close-login" src="/staticFile/images/pic12.gif"/>
    <div class="login-form">
        <input type="hidden" id="isPassVerify"/>
        <div id="errorPrompt"></div>
        <div class="username">
            <input type="text" id="userName" placeholder="手机号码" autocomplete="on" />
            <span class="user-icon icon">u</span>
        </div>
        <div class="password">
            <input type="password" id="userPassword" placeholder="请输入密码" />
            <span class="password-icon icon">p</span>
        </div>
        <div class="account-control">
            <!-- 登录滑动验证 -->
            <div class="verification-code" style="height: 120px;">
                <!--原始图 -->
                <div id="verifyImgSource" class="verify-img-source" style="height: 113px;"></div>
                <!--被扣掉的原始图-->
                <div id="verifyImgCut" class="verify-img-cut" style="height: 113px;"></div>
                <!--加载中小图片-->
                <div id="verifyImgLoading" class="verify-img-loading" style="height: 113px;"></div>
                <!--滑动小扣图-->
                <div id="verifyImgDrag"></div>
            </div>
            <div id="drag"></div>
            <span><a href="userPages/forgetPassword.html">忘记密码？</a></span>
            <button id="btnUserLogin">登录</button>
        </div>
        <p class="not-registered">还没有注册?现在就去<a href="userRegister.html">注册!</a></p>
    </div>
</div>
<div class="loading">
    <img width="128" height="128" src="/staticFile/images/userIndex/loading.gif" /><br><br>
    <span id="loadingWord"></span>
</div>
<div class="page-mask"></div>
</body>
</html>
<script type="text/javascript" src="/staticFile/js/common/commonPage.js"></script>
<script type="text/javascript" src="/staticFile/js/common/commonHeaderPage.js"></script>
<script type="text/javascript">
//获取单号参数
let currentPath = window.document.location.href, levelTextArr = ['1分很不满意','2分不满意','3分一般','4分满意','5分很满意'];
let paramArray = currentPath.split('?')[1].split('&');
let oId = paramArray[0].split('=')[1];
if (paramArray.length > 1){
    $('#soDistance').text(paramArray[1].split('=')[1]);
}
//是否已查看评价信息
let isSeeRate = false;
$(function(){
    let fourRandom = '';
    for(let i = 0; i < 4; i ++) {
        fourRandom += Math.floor(Math.random() * 10);
    }
    $('#systemCheckCode').text(fourRandom);
    let soPhone = showOrderDetail();
    let g = soPhone.substring(3,7);
    $('#seeFullPhone').click(function(){
        let code = $('#writeCheckCode').val(), phone = $('#issuerPhone').text();
        if(isNull(code)){
            alert('请输入验证码');
            return;
        }
        if(code != fourRandom){
            alert('验证码错误');
            return;
        }
        $('#issuerPhone').text(phone.replace('****', g));
    });
    $('#btnGrabOrder1688').click(function () {
        robServiceOrder($('#soBillNumber').val(), '1688');
    });
    $('.close-login').click(function() {
        $('#middleMain,.page-mask').hide();
        $('#btnGrabOrder1688')[0].innerHTML = '我要抢单';
    });
    //查看评价
    $('#btnSeeOrderRate').click(function() {
        if(isSeeRate) {
            return;
        }
        isSeeRate = true;
        $.ajax({
            type: 'post',
            url: '/userIndex/listRateByOrder',
            dataType: 'json',
            data: {
                billNo: $('#soBillNumber').val()
            },
            timeout: 30000,
            success: function(result) {
                if (isNull(result)){
                    alert('还没有人评价');
                    isSeeRate = false;
                    return;
                }
                $('#rateDiv table').empty();
                for (let g = 0; g < result.length; g ++){
                    appendImpress(result[g]);
                }
                isSeeRate = true;
            },
            error: function() {
                alert('当前系统繁忙，请稍候再查看');
                isSeeRate = false;
            }
        });
    });
});

/**
 * 添加评价印象信息
 */
function appendImpress(rateObj) {
    let dicParentId = 74, grade = parseInt(rateObj.grade), userType = '(抢单人)', imgLevelStr = '', impressStr = '';
    if (rateObj.robOrGet == 'g') {
        dicParentId = 67;
        userType = '(发布人)';
    }
    //获取等级星str
    for (let x = 0; x < grade; x ++){
        imgLevelStr += '<img src="../staticFile/images/userIndex/x2.png">';
    }
    //获取印象str
    let rateArray = getDictionaries(dicParentId), impressArray = rateObj.impress.split(',');
    let iaLen = impressArray.length;
    for (let i = 0; i < iaLen; i ++){
        for (let g = 0; g < rateArray.length; g ++){
            let ra = rateArray[g], mrCss = '';
            if ((g + 1) % 5 == 0) {
                mrCss = 'Style="margin-right:0;"';
            }
            if (ra.id == impressArray[i]){
                impressStr += '<li data-impression="' + ra.id + '" ' + mrCss + '>' + ra.dicName + '<i class="iconfont icon-checked"></i></li>';
            }
        }
    }
    $('#rateDiv table').append('<tr>' +
        '<td class="rate-user">' +
            '<span>' + rateObj.nickName + '</span>' +
            '<div style="font-size: 16px;">' + userType + '</div>' +
        '</td>' +
        '<td>' +
            '<div class="issuer-rate">' +
                '<div style="line-height: 20px;">' +
                    '<ul>' +
                        '<li data-default-index="0">' +
                            '<span>' + imgLevelStr + '</span>' +
                            '<span class="level">' + levelTextArr[grade - 1] + '</span>' +
                        '</li>' +
                    '</ul>' +
                '</div>' +
                '<div class="user-impress">' +
                    '<ul>' + impressStr + '</ul>' +
                '</div>' +
                '<div style="margin-top: ' + (iaLen > 4 ? 108 : 53) + 'px;">' + rateObj.rateContent + '</div>' +
            '</div>' +
        '</td>' +
    '</tr>');
}

/**
 * 查询订单详情
 */
function showOrderDetail() {
    let soPhone = '';
    $.ajax({
        type: 'post',
        url: '/userIndex/showOrderDetail',
        dataType: 'json',
        data: {oid: oId},
        async: false,
        timeout: 30000,
        success: function(myOrder) {
            if (myOrder == null || myOrder == ''){
                return;
            }
            let idArray = ['soName','soServiceDate','serviceTypeName','soAddress','soAmount','soDesc','soOrderDate'],
                ic = myOrder.isCommented,st = myOrder.soStatus,bn = myOrder.soBillNumber,issueUserId = myOrder.soUserId;
            for (let g = 0; g < idArray.length; g ++){
                $('#' + idArray[g]).text(myOrder[idArray[g]]);
            }
            $('#soBillNumber').val(bn);
            $('#billNo').text(bn);
            $('#issuerUserId_').attr('id','issuerUserId_' + bn).val(issueUserId);
            soPhone = myOrder.soPhone;
            $('#issuerPhone').text(soPhone.replace(soPhone.substring(3,7),'****'));
            let isFinish = st == '2' || st == '3' || st == '7', loginUserId = sessionStorage.getItem(SCS_USER_ID);

            //如果是未抢状态、登录人！=发布人
            if (st == '0' && loginUserId != issueUserId){
                $('#btnGrabOrder1688').show();
            } else if (isFinish && (ic == '3' || ic == '1' || ic == '2')) {
                $('#btnSeeOrderRate').show();
            }
        },
        error: function() {
            alert('当前系统繁忙，请稍候再查看');
        }
    });
    return soPhone;
}
</script>